<template>
  <div class="aui-card-list">
    <el-card shadow="never" class="aui-card-list-body">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item, i) in this.clientList" :key="i" :label="item.label" :name="item.val"></el-tab-pane>
      </el-tabs>
      <vxe-toolbar setting>
        <template v-slot:buttons>
          <el-button v-if="$hasPermission('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">{{
            $t('add') }}
          </el-button>
          <el-button @click="$refs.xTree.setAllTreeExpansion(true)">{{ $t('openall') }}</el-button>
          <el-button @click="$refs.xTree.clearTreeExpand()">{{ $t('closeall') }}</el-button>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="getTreeDataList()" circle></el-button>
        </template>
      </vxe-toolbar>
      <div class="aui-card-list-body-table">
        <vxe-table :loading="dataListLoading" :data="dataList" ref="xTree" auto-resize class="vxe-table-element" :tree-config="{children: 'children',trigger:'cell'}" max-height="auto">
          <vxe-table-column prop="name" :label="$t('menu.name')" tree-node></vxe-table-column>
          <vxe-table-column prop="icon" :label="$t('menu.icon')" width="80" align="center">
            <template slot-scope="scope">
              <svg class="icon-svg" aria-hidden="true">
                <use :xlink:href="`#${scope.row.icon}`"></use>
              </svg>
            </template>
          </vxe-table-column>
          <vxe-table-column prop="type" :label="$t('menu.type')" width="80" align="center">
            <template slot-scope="scope">
              <el-tag size="small" :type="$getDataItem(baseData.typeList, scope.row.type).type">{{
                $t($getDataItem(baseData.typeList, scope.row.type).label) }}
              </el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column prop="showFlag" :label="$t('menu.showFlag')" width="70" header-align="center" align="center">
            <template slot-scope="scope">
              <svg class="icon-svg" aria-hidden="true">
                <use :xlink:href="scope.row.showFlag==1?'#icon-eye':'#icon-close'"></use>
              </svg>
            </template>
          </vxe-table-column>
          <vxe-table-column prop="sort" :label="$t('menu.sort')" width="60" align="center"></vxe-table-column>
          <vxe-table-column prop="url" :label="$t('menu.url')"></vxe-table-column>
          <vxe-table-column prop="permissions" :label="$t('menu.permissions')"></vxe-table-column>
          <vxe-table-column :label="$t('handle')" header-align="center" align="center" width="260">
            <template slot-scope="scope">
              <el-button v-if="$hasPermission('sys:menu:save')" type="text" icon="el-icon-plus" size="small" @click="addChild(scope.row)">{{
                $t('addChild') }}
              </el-button>
              <el-button v-if="$hasPermission('sys:menu:update')" type="text" icon="el-icon-edit" size="small" @click="addOrUpdateHandle(scope.row)">{{
                $t('update') }}
              </el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button v-if="$hasPermission('sys:menu:delete')" type="text" icon="el-icon-delete" size="small" @click="deleteHandle(scope.row.id)">{{
                $t('delete') }}
              </el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button v-if="$hasPermission('sys:menu:update')" type="text" icon="el-icon-setting" size="small" @click="editLanguage(scope.row)">{{ $t('language') }}
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getTreeDataList"></add-or-update>
      </div>
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './menu-add-or-update'
import { treeDataTranslate } from '@/utils/index'
import staticData from './menu.json'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      baseData: staticData,
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListIsPage: false,
        deleteURL: '/sys/menu',
        getTreeDataListURL: '/sys/menu/list',
        treeType: true
      },
      tableHeightHold: 54,
      activeName: 'C01'
    }
  },
  components: {
    AddOrUpdate
  },
  computed: {
    clientList: function () {
      return this.$getDictList(this.baseData.CODE_MENU_CLIENT, true)
    }
  },
  created () {
    this.$nextTick(() => {
      if (!this.$cookies.get('token')) {
        return
      }
      if (this.mixinViewModuleOptions.treeType) {
        this.getTreeDataList()
      } else {
        this.getDataList()
      }
    })
  },
  methods: {
    // 获取树表数据
    getTreeDataList () {
      this.dataListLoading = true
      let rows = this.$refs.xTree.getTreeExpandRecords()
      this.$refs.xTree.clearTreeExpand()
      this.$http.get(
        this.mixinViewModuleOptions.getTreeDataListURL, { params: { ...this.dataForm } }
      ).then(({ data: res }) => {
        this.dataListLoading = false
        if (res.code !== 0) {
          return
        }
        this.dataList = treeDataTranslate(res.data, 'id', 'pid')
        this.dataList = this.dataList.filter((value, index, array) => {
          return !value.client || value.client === this.activeName
        })
        this.$xeutils.eachTree(this.dataList, item => {
          if (this.$xeutils.find(rows, val => val.id === item.id)) {
            this.$refs.xTree.toggleTreeExpansion(item)
          }
        })
      }).catch(err => {
        this.dataListLoading = false
        return this.$message.error(err)
      })
    },
    handleClick (tab, event) {
      this.getTreeDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle (row) {
      if (!row) { row = {} }
      this.addOrUpdateVisible = true
      this.getTreeCompList(row.id).then(res => {
        this.$refs.addOrUpdate.parentTreeData = res
        this.$nextTick(() => {
          this.$refs.addOrUpdate.initParams = { id: row.id, pid: row.pid, client: this.activeName }
          this.$refs.addOrUpdate.init()
        })
      })
    },
    addChild (row) {
      this.addOrUpdateVisible = true
      this.getTreeCompList().then(res => {
        this.$refs.addOrUpdate.parentTreeData = res
        this.$nextTick(() => {
          this.$refs.addOrUpdate.initParams = { id: null, pid: row.id, client: this.activeName }
          this.$refs.addOrUpdate.init()
        })
      })
    },
    // 父级树组件
    getTreeCompList (id) {
      return new Promise(resolve => {
        this.$http.get(this.mixinViewModuleOptions.getTreeDataListURL, { params: {} }
        ).then(({ data: res }) => {
          if (res.code !== 0) {
            return false
          }
          let parentData = treeDataTranslate(res.data, 'id', 'pid')
          // parentData = parentData.filter((value, index, array) => {
          //   return !value.client || value.client === this.activeName
          // })
          // let root = [
          //   {
          //     id: '0',
          //     showFlag: 1,
          //     pid: '-1',
          //     name: this.$t('menu.parentNameDefault'),
          //     client: this.activeName,
          //     icon: 'icon-project',
          //     menuClass: this.activeName,
          //     children: parentData
          //   }
          // ]
          resolve(parentData)
        }).catch(err => {
          return this.$message.error(err)
        })
      })
    },
    editLanguage (row) {
      var router = {
        name: 'sys-language',
        id: row.id,
        menuId: this.$route.meta.menuId,
        oldName: 'sys-menu',
        path: 'sys/sysLanguage',
        title: '菜单-国际化-' + row.name
      }

      var params = {
        tableName: 'sys_menu',
        tableId: row.id,
        fieldName: 'name'
      }
      this.$options.methods.openNewTab(this.$router, router, params)
    }
  }
}
</script>
